<template>
	<view class="address">
		<view style="height: 20rpx;"></view>
		
		<view class="addressinfolist">
			<view class="addressinfoli">
				<view class="addressinfolileft">
					收件人
				</view>
				<input class="addressinfoliinput" type="text" value="" v-model="addressinfo.name" placeholder="请填写收件人姓名" placeholder-style="font-size:28rpx;color:#9c9c9c;"/>
			</view>
			<view class="addressinfoli">
				<view class="addressinfolileft">
					手机号码
				</view>
				<input class="addressinfoliinput" maxlength="11" type="number" value="" v-model="addressinfo.mobile" placeholder="请填写收件人手机号码" placeholder-style="font-size:28rpx;color:#9c9c9c;"/>
			</view>
			<view class="addressinfoli">
				<view class="addressinfolileft">
					所在地区
				</view>
				<view class="addressinfoliinput right" @click="openAddres">
					{{pca_name?pca_name:'请选择'}}
				</view>
			</view>
			<view class="addressinfoli addressinfolione">
				<view class="addressinfolileft">
					详细地址
				</view>
				<textarea class="addressinfolitextarea" type="text" v-model="addressinfo.detail" placeholder-style="color:#9c9c9c;line-height:48rpx;" placeholder="请输入详细地址信息,不少于4个字"/>
			</view>
		</view>
		<view class="saveaddress" @tap="saveinfo">
			{{order_id?'保存并使用':'保存'}}
		</view>
		<addressBox ref="addressBox" @addrFun="onConfirm" />
	</view>
</template>

<script>
	import addressBox from '@/components/cityPicker/addressBox.vue'
	export default {
		components: { 
			addressBox,
		},
		data() {
			return {
				addressid:'',
				addressinfo:{
					name:'',
					mobile:'',
					detail:'', //详细地址
					province:'',
					city:'',
					country:'',
					id:'',
				},
				pca_name:'',
				addrCode:'',
				pca_nameArr:[],
				order_id:'',//订单id
				shopId:'',//门店id
			}
		},
		onLoad: function (option) { 
			// #ifdef MP-WEIXIN
			this.getLocation()
			// #endif
			// 如果存在则为修改接口，否则为新增地址，且新增时默认回显用户名等个人信息
			if(option.obj){
				this.addressinfo = option.obj;
				var addressinfo = decodeURIComponent(option.obj)
				this.addressinfo = JSON.parse(addressinfo)
				this.pca_nameArr.push(this.addressinfo.province)
				this.pca_nameArr.push(this.addressinfo.city)
				this.pca_nameArr.push(this.addressinfo.country)
				console.log('this.pca_nameArr',this.pca_nameArr)
			}
		},
		methods: {
			// 初始化事件
			init(){
				var that = this;
				var data = {}
			},
			// 关于地址
			openAddres() {
				this.$refs['addressBox'].open()
			},
			onConfirm(e) {
				this.pca_name = e.name
				this.addressinfo.province = e.provinceName
				this.addressinfo.city = e.cityName
				this.addressinfo.country = e.areaName
				this.$forceUpdate()
			},
			onChange(e){
				this.pca_name = e.label
				let label = e.label.split('-')
				console.log('label',label)
				this.addressinfo.province = label[0]
				this.addressinfo.city = label[1]
				this.addressinfo.country = label[2]
			},
			// 获取地址api
			getLocation(){
				this.$publicFun.getLocation().then(
					(res)=>{
						this.addressinfo.longitude = res?res.longitude:''
						this.addressinfo.latitude = res?res.latitude:''
						console.log('当前位置的经度：' + res);
						console.log('当前位置的纬度：' + res);
					}
				)
			},
			//保存地址
			saveinfo(){
					var that = this;
					if(!this.addressinfo.name){
						uni.showToast({
							icon: 'none',
							title: '请输入正确的手机号!'
						})
						return false
					}
					if(!this.$publicFun.regPhone.test(this.addressinfo.mobile)){
						uni.showToast({
							icon: 'none',
							title: '请输入正确的手机号!'
						})
						return false
					}
					if(this.addressinfo.detail.length<4){
						uni.showToast({
							icon: 'none',
							title: '您的地址过短,请详细填写您的地址信息!'
						})
						return false
					}
					var data = {}
					if(this.addressid){
						this.addAddressApi()
					}else{
						this.addAddressApi()
					}
					
			},
			//添加地址
			addAddressApi(){
				var that = this;
				this.$apiFun.postApi(this.$api.saveOrUpdateApi,this.addressinfo,function(res){
					if(res.code ==200){
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
						setTimeout(()=>{
							uni.navigateBack()
						},2000)
					}
				},function(err){
				});
			},
			// 根据有无shopid判断跳转的路径
			// jumpUrl(address){
			// 	var address = {
			// 		address:address.address ,
			// 		mobile:address.mobile ,
			// 		name:address.name,
			// 		id:address.id,
			// 		province:address.province,
			// 		city:address.city,
			// 		district:address.district,
			// 	}
			// 	if(this.shopId){
			// 		uni.navigateTo({
			// 			url:'/pages_goodsClass/Shopcart/uni_Orderconfirm?order_id='+this.order_id+'&shopId='+this.shopId+'&address='+encodeURIComponent(JSON.stringify(address))
			// 		})
			// 		this.apply_alter_addressApi()
			// 	}else{
			// 		uni.navigateBack()
			// 	}
			// },
		}
	}
</script>

<style scoped lang="less">
	page{
		background-color: #f2f2fa;
	}
	.address{
		height: auto;
		background-color: #ffffff;
	}
	.addressinfolist{
		background-color: #FFFFFF;
	}
	.addressinfoli{
		padding: 0 30rpx;
		box-sizing: border-box;
		display: flex;
		border-bottom: 1px solid #E5E5E5;
	}
	.addressinfoli:last-child{
		border-bottom:none;
	}
	.addressinfolileft{
		width: 160rpx;
		height: 98rpx;
		line-height: 98rpx;
		font-size: 28rpx;
		color: #333333;
	}
	.addressinfoliinput{
		width: 560rpx;
		height: 98rpx;
		line-height: 98rpx;
		font-size: 28rpx;
		color: #9c9c9c;
	}
	.addressinfoli .right{
		padding-right: 15rpx;
		box-sizing: border-box;
		// background: url('@{imgUrl}godtail.png') no-repeat right;
		background-position-y: center;
		background-size: 12rpx 22rpx;
	}
	.addressinfolione{
		padding: 25rpx 30rpx;
	}
	.addressinfolione .addressinfolileft{
		line-height: 48rpx;
	}
	.addressinfolitextarea{
		font-size: 28rpx;
		color: #9C9C9C;
		height: 180rpx;
		box-sizing: border-box;
		padding: 0;
	}
	.addressinfodefault{
		width: 620rpx;
	}
	.deladdress{
		margin-top: 4rpx;
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		background-color: #ffd8d6;
		font-size: 28rpx;
		color: #ec453d;
		text-align: center;
	}
	.saveaddress{
		line-height: 80rpx;
		text-align: center;
		background-color:  #e42e3c;
		font-size: 30rpx;
		color: #FFFFFF;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 40px;
		margin: auto;
	}
</style>
